<template>
    <div>
        <el-dialog
                title="添加新会员"
                :visible.sync="saveNewMemberShow"
                :show-close="false"
                :before-close="handleClose">
            <el-form label-position="right" :rules="rules" :model="MemberForm" ref="ruleForm">
                <el-form-item label="会员名称" prop="name">
                    <el-input v-model="MemberForm.name"></el-input>
                </el-form-item>
                <el-form-item label="会员手机号" prop="phone">
                    <el-input v-model.number="MemberForm.phone" maxlength="11" minlength="11"></el-input>
                </el-form-item>
                <el-form-item label="私教选择">
                    <el-select v-model="MemberForm.coach" placeholder="请选择您的私教">
                        <el-option v-for="item in coachList" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="card" label="会员卡选择">
                    <el-select v-model="MemberForm.month" placeholder="请选择您的会员卡类型">
                        <el-option v-for="card in memberCard" :label="card.name" :value="card.value"></el-option>
                    </el-select>
                </el-form-item>
                <div class="price-box">
                    总价:
                    <div class="price">￥{{totalPrice}}</div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submit" plain>确 定</el-button>
  </span>
        </el-dialog>
        <pay-page ref="pay" :orderMap="orderContent" @saveTheOrder="saveTheOrder"></pay-page>
    </div>
</template>

<script>
    import {saveNewMember, checkMemberAccount} from "@/utils/apis/member";
    import {getAllCoach} from "@/utils/apis/employee";
    import PayPage from "@/views/PayPage";

    export default {
        name: "NewMember",
        components: {
            PayPage
        },
        data() {
            return {
                MemberForm: {
                    name: '',
                    phone: '',
                    coach: '',
                    month: 3,
                    type: '季卡',
                    price: 349.9
                },
                //订单信息
                orderContent: {
                    type: 'member',
                    price: 0,
                    subject: 'vitality健身房会员卡'
                },
                //教练列表
                coachList: [],
                //会员卡列表
                memberCard: [
                    {
                        name: '季卡(有效期三个月)',
                        value: 3,
                        price: 349.9
                    }, {
                        name: '半年卡',
                        value: 6,
                        price: 639.9
                    }, {
                        name: '年卡',
                        value: 12,
                        price: 1198.9
                    }, {
                        name: '两年卡',
                        value: 24,
                        price: 2289.9
                    },
                    {
                        name: '尊贵三年卡',
                        value: 36,
                        price: 3299.9
                    }
                ],
                //表单校验
                rules: {
                    name: [
                        {required: true, message: '请输入会员名称', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                    ]
                }
            };
        },
        props: ['saveNewMemberShow'],
        created() {
            this.initData()
        },
        computed: {
            totalPrice() {
                let total = this.MemberForm.price
                this.memberCard.forEach(card => {
                    if (this.MemberForm.month === card.value) {
                        total = card.price
                    }
                })
                if (this.MemberForm.coach !== '') {
                    total += 1499.9
                }
                return Math.round(total * 100) / 100
            }
        },
        methods: {
            async initData() {
                await getAllCoach().then(res => {
                    if (res.data.code === 200) {
                        res.data.data.forEach(item => {
                            this.coachList.push(item.name)
                        })
                    } else {
                        this.$notify.error('数据请求失败')
                    }
                })
            },
            //关闭弹窗
            handleClose() {
                this.cancel()
            },
            cancel() {
                //关闭本次表单验证提示框
                this.$refs['ruleForm'].clearValidate()
                this.$emit('cancel')
                this.$notify.info('取消添加')
            },
            computeType() {
                if (this.MemberForm.month === 6) {
                    this.MemberForm.type = '半年卡'
                } else if (this.MemberForm.month === 12) {
                    this.MemberForm.type = '年卡'
                } else if (this.MemberForm.month === 24) {
                    this.MemberForm.type = '两年卡'
                } else if (this.MemberForm.month === 36) {
                    this.MemberForm.type = '尊贵三年卡'
                }
            },
            //提交表单
            submit() {
                //计算出type
                this.computeType()
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.MemberForm.price = this.totalPrice
                        this.orderContent.price = this.totalPrice
                        checkMemberAccount(this.MemberForm.phone).then(res => {
                            if (res.data.data)
                                this.$message.success('该手机号已为会员')
                            else
                                this.$refs.pay.toPayment()
                        })
                    }
                })

            },
            saveTheOrder() {
                saveNewMember(this.MemberForm).then(res => {
                    if (res.data.code === 200) {
                        this.$notify.success('会员添加成功')
                        this.MemberForm = {
                            name: '',
                            phone: '',
                            coach: '',
                            month: 3,
                            type: '季卡',
                            price: 349.9
                        }
                        this.$emit('cancel')
                    } else {
                        this.$notify.error(res.data.message)
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .price-box {
        text-align: center;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .price {
        font-size: 36px;
        color: #e33636;
    }
</style>

